<script setup>
import { ref,onMounted } from 'vue'


import * as THREE from 'three';
import CreateTwin from '../twin/CreateTwin.js';

const webgl = ref(null);



onMounted(() => {
  // 实例化一个CreateTwin对象
  const twin = new CreateTwin({
    container:webgl.value
  });

  // 三维场景中添加一个立方体
  const geometry = new THREE.BoxGeometry(3, 3, 3);
  const material = new THREE.MeshBasicMaterial({
      color: 0x00ffff, 
      transparent: true,
      opacity: 0.5
  });
  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 0, -5);
  mesh.add(new THREE.AxesHelper(2));
  twin.scene.add(mesh);  
});






</script>
<template>
  <div ref="webgl"><!-- 想在这里插入threejs canvas画布 --></div>
</template>
    

